<template>
  <div class="container">
      <div class="list" v-for="item in data" :key="item.id">
        <div class="item">
          <div class="left" v-if="item.user">
            <div class="row-one">
              <span @click="$router.push({name: 'User', params: { user_id: `${item.user_id}` }})">{{
                item.user.nickname
              }}</span>
              <span>{{ item.createdAt | time }}</span>
              <span>{{ item.category.name }}</span>
            </div>
            <div
              class="row-two"
              @click="$router.push({name: 'Details', params: { article_id:`${item.id}`}})"
            >
              <h2 :title="item.title">{{ item.title }}</h2>
            </div>
            <div
              class="row-three"
              @click="$router.push({name: 'Details', params: { article_id:`${item.id}`}})"
            >
              <p class="item-content" v-text="item.content"></p>
            </div>
            <div class="row-four">
              <a><i class="iconfont icon-liulan"></i>{{ item.read_count }}</a>
              <a><i class="iconfont icon-dianzan1"></i>{{ item.like_count }}</a>
              <a @click="$router.push(`/details/${item.id}#comment`)"><i class="iconfont icon-31pinglun"></i>{{ item.comment_count }}</a>
              <a @click="clickAccusation(item.id)"><i class="iconfont icon-gengduo"></i></a>
            </div>
          </div>
          <div
            class="right"
            @click="$router.push({name: 'Details', params: { article_id:`${item.id}`}})"
          >
            <el-image :src="item.cover_img" fit="contain"></el-image>
          </div>
        </div>
      </div>
   <!-- 举报文章组件 -->
    <Report v-if="showAccusation" :showAccusation="showAccusation" :articleId="articleId" @showAccusation="showAccusation = false"/>
    </div>
</template>

<script>
import Report from '@/views/Report' // 举报文章组件
export default {
  name: 'ArticleItem',
  components: { Report },
  props: {
    data: Array,
    required: true,
    default: function () {
      return []
    }
  },
  data () {
    return {
      showAccusation: false, // 是否显示举报对话框
      articleId: 0
    }
  },
  created () {},
  methods: {
    clickAccusation (id) {
      console.log(id)
      this.articleId = id
      this.showAccusation = true
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  padding: 0px 20px;
  &:hover {
    cursor: pointer;
    background: #fafafa;
  }
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  border-bottom: 1px solid #eef2f4;
}

.left {
  width: 610px;
  .row-one {
    span:first-child,
    span:last-child {
      &:hover {
        color: #347aeb;
      }
    }
    span:first-child {
      padding: 0 8px 0 0;
      color: #434445;
      border: none;
    }
    span {
      padding: 0 8px;
      border-left: 1px solid #dee0e2;
    }
    color: #86909c;
    font-weight: 500;
    font-size: 13px;
  }
  .row-two {
    h2 {
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .row-three {
    font-size: 13px;
    color: #86909c;
    p {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; //隐藏文字
    }
  }
  .row-four {
    display:flex;
    font-size: 14px;
    i {
      color: rgb(160, 150, 150);
      margin-right: 4px;
      &:hover{ color: #347aeb}
    }
    a {
      display:flex;
      align-items: center;
      color: #4e5969;
      margin-right: 15px;
    }
  }
}
.right {
  .el-image {
    border-radius: 4px;
    width: 150px;
  }
}
</style>
